<script setup lang="ts">
import useScroll from "@/hooks/useScroll.ts";

const { scroll } = useScroll();


</script>

<template>
   <div class="sticky" :class="{show:scroll.top>=180}">
      <div class="container" v-show="scroll.top>=180">
         <RouterLink class="logo" to="/"/>
         <Navs></Navs>
         <div class="right">
            <RouterLink to="/">品牌</RouterLink>
            <RouterLink to="/">专题</RouterLink>
         </div>
      </div>
   </div>
</template>

<style scoped lang="less">
.sticky {
   width: 100%;
   height: 80px;
   position: fixed;
   left: 0;
   top: 0;
   z-index: 999;
   background-color: #fff;
   border-bottom: 1px solid #e4e4e4;
   transform: translateY(-100%);
   opacity: 0;

   &.show {
      transition: all 0.3s linear;
      transform: none;
      opacity: 1;
   }

   .container {
      display: flex;
      align-items: center;

      .logo {
         width: 200px;
         height: 80px;
         background: url(../../assets/images/logo.png) no-repeat right 2px;
         background-size: 160px auto;
      }

      .right {
         width: 220px;
         display: flex;
         text-align: center;
         padding-left: 40px;
         border-left: 2px solid @xtxColor;

         a {
            width: 38px;
            margin-right: 40px;
            font-size: 16px;
            line-height: 1;

            &:hover {
               color: @xtxColor;
            }
         }
      }
   }

}
</style>
